<template>
  <div class="sidebar">
    <div
      class="sidebar-item"
      v-for="item in sidebarList"
      :key="item.key"
      :class="item.key === sceneStore.leftPanelActive ? 'active' : ''"
      @click="() => setLeftPanelActive(item.key)"
    >
      <SvgIcon :icon-class="item.icon" />
      <span>{{ item.title }}</span>
    </div>

    <div
      class="sidebar-item bottom"
      key="layer"
      :class="sceneStore.layerPanelVisible ? 'active' : ''"
      @click="() => setLayerPanelVisible()"
    >
      <SvgIcon icon-class="ic_tuceng" />
      <span>图层</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';

defineOptions({
  name: 'SceneSiderbar',
});

const sceneStore = useSceneStore();
const sidebarList = [
  {
    key: 'info',
    title: '场景',
    icon: 'ic_changjing',
  },
  {
    key: 'bottomPlate',
    title: '底板',
    icon: 'ic_diban',
  },
  {
    key: 'panel',
    title: '面板',
    icon: 'ic_mianban',
  },
  {
    key: 'effect',
    title: '特效',
    icon: 'ic_texiao',
  },
  {
    key: 'import',
    title: '导入',
    icon: 'ic_导入资源',
  },
];

/**
 * 场景、底板、面板、特效、导入按钮显示逻辑
 * @param key
 */
const setLeftPanelActive = (key: string) => {
  sceneStore.rightPanelVisible = true;
  sceneStore.leftPanelVisible = true;
  if (key === sceneStore.leftPanelActive) {
    sceneStore.leftPanelActive = '';
  } else {
    sceneStore.leftPanelActive = key;
  }
  if (sceneStore.layerPanelVisible && sceneStore.leftPanelActive) {
    sceneStore.topHeight = '50%';
  } else if (sceneStore.layerPanelVisible) {
    sceneStore.topHeight = '0px';
  } else if (sceneStore.leftPanelActive) {
    sceneStore.topHeight = 'calc(100% - 28px)';
  } else {
    sceneStore.leftPanelVisible = false;
    sceneStore.topHeight = 'calc(100% - 28px)';
  }
};

/**
 * 点击图层按钮显示逻辑
 */
const setLayerPanelVisible = () => {
  sceneStore.leftPanelVisible = true;
  sceneStore.layerPanelVisible = !sceneStore.layerPanelVisible;
  if (sceneStore.layerPanelVisible && sceneStore.leftPanelActive) {
    sceneStore.topHeight = '50%';
  } else if (sceneStore.layerPanelVisible) {
    sceneStore.topHeight = '0px';
  } else if (sceneStore.leftPanelActive) {
    sceneStore.topHeight = 'calc(100% - 28px)';
  } else {
    sceneStore.leftPanelVisible = false;
    sceneStore.topHeight = 'calc(100% - 28px)';
  }
};
</script>

<style lang="less" scoped>
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 60px;
  height: 100%;
  background: #181818;
  .sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    cursor: pointer;

    &.bottom {
      position: fixed;
      width: 60px !important;
      bottom: 16px;
      left: 0;
    }

    &.active {
      background: #0560fd;
      border-radius: 4px;
    }
    .svg-icon {
      font-size: 24px;
    }

    span {
      margin-top: 2px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
